<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基础语法</title>
    <!-- <link rel="stylesheet" href="test.css"> -->
</head>
<body>
    <!--弹性布局  主要是安排页面上的元素的位置(排列方式) 实际上盒子模型的外边距就影响到了元素和元素,但这还不够,弹性布局就是强化这一点的,默认的网页布局是从上到下的
    而实际的网页则是既有从上到下,还有从左到右  -->
    <style>
        .parent{
            /* width: 100%表示继承body的宽度  */
            width: 100%;
            height: 200px;
            background-color: bisque;
            
            /* div是独占一行的,而想要让子元素的div在父元素中水平排列就得用到弹性布局 给父元素设置一个属性 display: flex,就可以了 */
            display: flex;
            
            /* 默认这些元素的排列方式是在左上角的,而想要改变排列方式就得使用另一个属性   水平方向:justify-content,start表示靠左排列,end表示靠右排列,center表示居中排列 space-between表示让元素之间有均匀的间隔 space-around表示除中间外左右也有间隔 */
            justify-content: space-around;
            
            /* 垂直方向也是一样的设置方式  最常用的还是放在中间*/
            align-items: center;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
    <div class="parent">
        <div class="one">1</div>
        <div class="one">2</div>
        <div class="one">3</div>
        <div class="one">4</div>

    </div>



    <!-- 盒子模型  HTML的元素其实是由这几个部分构成的 margin外边距(就像是房子和其他房子的距离) border边框(相当于房子的外墙) padding内边距(相当于家中的东西距离墙的距离)
        而设置一个边框是会撑大原有元素的尺寸的(有可能就导致元素尺寸改变,进一步就影响到页面布局了)  而实际的开发过程是将box-sizing设置为border-box此时的设置的边框就会挤压内容而不会撑大元素  -->

    <style>
        /* div{
            width: 200px;
            height: 200px;
            background-color:bisque; */
            /* 2px大小的边框,颜色为黑色,且是实心的(边框样式也是有很多种的,border-style可以查到) */
            /* border: 2px black solid;
            box-sizing: border-box; */
            /* 里面的内容和边框的距离,可以在四个方向设置内边距 padding-left padding-right padding-top padding-bottom  这个默认情况下也是会撑大元素的,因此也要使用box-sizing来设置的 */
            /* padding: 20px;
        } */
        /* .one{
            margin-bottom: 10px;
        }  */
        /* 外边距在垂直方向是会存在"塌陷"的情况的,两者都设置了外边距,这里的外边距是不会累加的,而是会重叠,取其最大值,但是在(内边距)水平向是会相加的 */
        /* .two{
            margin-top: 20px;
        } */
    </style>
    <!-- <div class="one">
        一个div
    </div>    
    <div class="two">
        一个div
    </div> -->

    <!-- 这里基于margin还可以实现元素的水平居中(不是文本)
     -->
     <style>
         /* .one{
             width: 400px;
             height: 200px;
             background-color:bisque;
         }
         .two{
             height: 50px;
             width: 100px;
             background-color: aquamarine; */
             /* 想要让这个块级元素处在中间位置 0表示上下外边距为0,auto表示左右外边距自适应(水平居中)*/
             /* margin: 0 auto;
         } */
     </style>
     <!-- <div class="one">
        <div class="two">
            hello
        </div>
    </div>     -->
    

    <!-- 块级元素(div,p)  行内元素(a,span) 行内块元素(不独占一行,但是能设置宽和高) 而通过display可以把行内元素设置块级元素
     display还有一个特殊的选项设置为none就可以让选中的元素隐藏起来 -->
    <style>
       /*  a{
            width: 60px;
            height: 100px;
            display: block;  
            display: none;            
        }*/
    </style>
    <!-- <a href="#">空链接1</a>
    <a href="#">空链接2</a>
    <a href="#">空链接3</a> -->


    <!-- 圆角矩形   HTML里面的元素都是默认矩形的，而想要设置的圆滑一些更好看一些就要通过border-radius来设置 -->
    <style>
        /* 这里border-radius的取值更像是这个矩形的切圆的半径一样,半径越大,就会越圆一些   通过这个就可以设置成一个圆形(将这个设置为宽度的一半就可以了),而且要是不想写数字的,还是可以写百分比的 */
        /* div{ */
            /*width: 400px;
            height: 200px;
            background-color: bisque;
            color: black;
            
             border-radius: 50px;
            line-height: 200px;
            text-align: center; */
            /*可以分开四个角分别写 */
            /* border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;  */
            /* 也可以按照四个角的顺序依次写在border-radius里面 */


            /* width: 200px;
            height: 200px;
            background-color: bisque;
            color: black;
            
            border-radius: 100px;
            line-height: 200px;
            text-align: center; */
        /* } */

    </style>
    <!-- <div>
        一个div
    </div> -->


    <!-- 背景属性     -->
    <!-- 背景颜色background-color  可前面设置颜色的方法都是一样的,这里就不再介绍了 background-color设置背景颜色,color设置文字颜色(尽量设置的不要太接近) 
         另外还可以设置一个transparent就是继承父类的颜色,在不设置背景颜色的情况下,就会默认使用这个颜色继承body的颜色-->



    <!--设置背景图片     总结:background这一系列属性对于图片的处理能力是要强于image的处理能力的,因此在实际开发中background会更常用一些  -->
    <style>
        /* div{ */
            /* 设置元素的行和列  另外再设置个背景颜色(后面会介绍到这里先用一下) text-align是水平居中,line-height就是行高了(将两个都设置为居中就可以实现正中心了) */
            
            /* width: 500px;
            height: 360px;
            font-size: 20px;
            background-color: bisque;
            color: #000; */

            /* 继承父类的背景颜色 */
            /* background-color: transparent; */

            /* 设置背景图片 */

            /* background-image: url(b.jpg); */
            
            /* 背景图片是覆盖背景的因此设置的背景图片会盖住其位置的背景颜色,而文本又是在背景图片上面的,不会被覆盖 */
            /* 图片默认是平铺的,background-repeat就可以设置为图片平铺,no-repeat就是不平铺,repeat就是默认选项 repeat-x水平平铺 repeat-y垂直平铺 */
            
            /* background-repeat: no-repeat; */
            
            /* 那么想改变背景图片的位置,就需要background-position来设置,使用px像素来设置也是可以的,但是如果想居中的话就需要算,因此想设置到中间的话可以使用百分比或者单词的形式来设置 */
            
            /* background-position: 50% 50%; */
            
            /* background-position: center center; */

            /* 又发现背景图片的大小是远小于背景大小的 使用 background-size来设置   可以使用数字加px直接设置  另外也可以直接使用英文单词来设置(contain(把图片拉伸到元素大小就结束了,保证背景图始终在元素内) 和 cover(会把元素全部覆盖)都是自适应)*/
            /* background-size: cover; */


            /* text-align: center;
            line-height: 360px; */
        /* } */
    </style>
    <!-- <div>
        一个div
    </div> -->



    <style>
        /* 文本属性,
        文本颜色,1一般不使用单词(样式比较少),
        2 一般使用rgb(红色,绿色,蓝色,色光三原色,通过这些不同的颜色混合就可以搭配出不同的颜色在CSS里面给这三个分量分别使用一个字节来表示0~255 可以使用qq截图来看试什么色号)
        3 使用rgb但是是16进制的这里不区分大小写FF和ff是一样的,而且这里是可以缩写的例如#XXYYZZ就可以缩写为#XYZ(必须三个组合都满足才能缩写)
        4.rgba多了个分量alpha表示透明度
        */
        
        /* .hh{ */
            /* color: blue; */
            /* color: rgb(255, 0, 0); */
            /* color: #088; */
            /* color: rgba(255, 0, 0, 0.3);  */
        /* } */
    </style>
    <!-- <div class="hh">
        这是一段话
    </div> -->

    <!-- 文本对齐 lef靠左对齐,center居中,right靠右对齐 -->
    <style>
        /* .one{
            text-align: left;
        }
        .two{
            text-align: center;
        }
        .three{
            text-align: right;
        } */
    </style>
    <!-- <div class="one">
        这是一段字
    </div>
    <div class="two">
        这是另一段字
    </div>
    <div class="three">
        这是又一段字
    </div> -->

    <!-- 文本装饰text-decoration    下划线,删除线 本身这种就是一种样式,因此基本都是给予CSS来实现的,而不是用html实现的  
        这里最常用的就是去掉下划线,删除线,例如a标签  在开发者工具里面也是可以手动选择起效的 -->
    <style>
        /* a{
            text-decoration: none;
        }
        div{
            text-decoration: line-through;
        } */
    </style>
    <!-- <div>
        这是一段话
    </div>
    
    <a href="#">
        空链接
    </a> -->

    <!-- 文本缩进text-indent  默认的文本段落是不会缩进的,因此需要使用这个样式才可以  而这里的单位可以使用px,
        但是一般会使用另一个单位em(表示当前元素的文字大小),这个单位是非常必要的,因为有些页面是可以放大缩小字体的,不能因为放大伙食缩小了字体而导致页面排版出现问题因此就得使用em单位来确认当前页面的字体大小来保证缩进
        而且这个缩进的单位可以是负数的,表示反向缩进  -->
    <style>
        /* div{
            text-indent: 2em;
        } */
    </style>
    <!-- <div>
        一段话:Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quo unde corrupti nobis pariatur accusamus facilis consequatur nesciunt sint dignissimos, veniam dolorem eos hic molestiae fugit quia sequi reiciendis ex!
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit optio pariatur, eos porro perspiciatis impedit itaque voluptatem sit amet consequatur corrupti, iste ut voluptate quasi officia nisi, voluptates est quisquam.
    </div> -->

    <!-- 行高   行高=字体大小 + 行间距
         对于一个文本而言有四条线,最顶部的称为顶线  最底部的称为底线 最中间的称为中线  而在底线和中线中间还有一条基线(这是英文字母中四线格中的第三条线)
         而一个行高就是两个文本顶线到顶线的距离,底线到底线的距离,中线到中线的距离,基线到基线的距离,设置行高时会同时对上下两个方向都会产生影响,上下领个边距都是均等的
         -->
    <style>
        /* 设置行高 */
        /* .two{
            line-height: 50px;
        } */
    </style>
    <!-- <div class="one">
        上一行
    </div>    
    <div class="two">
        中间行
    </div>
    <div class="three">
        下一行
    </div> -->
    <!-- 有因为行高是上下均等的,因此就可以基于行高来设置文本的垂直方向居中  元素高度是多少就设置多高的行高就可以垂直方向居中了 -->
    <style>
        /* div{ */
            /* 设置元素的行和列  另外再设置个背景颜色(后面会介绍到这里先用一下) text-align是水平居中,line-height就是行高了(将两个都设置为居中就可以实现正中心了) */
            /* width: 200px;
            height: 150px;
            font-size: 20px;
            background-color: bisque;

            text-align: center;
            line-height: 150px; */
        /* } */
    </style>
    <!-- <div>
        一个div
    </div> -->
    

    <!-- CSS中的所有属性非常多,这里就快速过一遍,以后用的时候边用边查 -->
    <!-- 字体  这里的字体一定要在机器上游这种字体,了呀通过html中的link属性自己加载 -->
    <style>
        /* font-family 字体 */
        /* font-size 大小 加px像素*/
        /* font-weight字体粗细 normal是正常,bold粗体 lighter细*/
        /* font-style字体样式(只要通过这个取消倾斜设置为normal) italic斜体*/

        /* .one{ */

            /* font-family: "微软雅黑";
            font-size: 10px; 
            font-weight: lighter;*/
            /* font-style: italic; */
        /* } */
        /* .two{ */
            /* font-family: "幼圆"; 
             font-size: 30px;
            font-weight:900;*/
            /* font-style: normal; */
        /* } */
    </style>
    <!-- <div class="one">
        这是一段字
    </div>
    <div class="two">
        这是另一段字
    </div> -->



 <!-- 对所有的标签都会起效,这是最基础的标签选择器,写的选择器就是一个html的标签名 -->
    <!-- <style>
        p{
            
            color: #000;
        }
    </style> -->

    <!-- 类选择器可以随心所欲的选择,任何想要的元素 -->
    <style>
        /* .开头的这个就是CSS中的类名 */
        /* .red{
            color: red;
        }*/
    </style> 
    <!-- 通过class属性就可以引入这个CSS类,不需要写.,也是可以起到效果的 -->
    <!-- <p class="red">
        hello Java
    </p>
    <p class="red">
        hello C
    </p>
    <p>
        hello C++
    </p> -->

    <!-- id选择器 需要给被选中的元素设置id属性 -->
    <style>
        /* 使用#就可以选中这个id,一个页面的id是唯一的 */
        /* #one{
            color: rgb(255, 0, 0);
        } */
    </style>
    <!-- <p id="one">
        hello Java
    </p>
    <p>
        hello C
    </p>
    <p>
        hello C++
    </p> -->

    <!-- 通配符选择器  *就是通配符,就直接选中了页面的所有元素,这个最大的用处就是取消掉浏览器的默认样式 -->
    <style>
        /* *{ */
            /* 这几个属性就是默认取消掉页面的所有默认样式 */
            /* margin: 0;
            padding: 0;
            box-sizing: border-box;
        } */
    </style>
    <!-- <p id="one">
        hello Java
    </p>
    <p>
        hello C
    </p>
    <p>
        hello C++
    </p> -->


    <!-- 复合选择器  就是把多个基础选择器综合起来 -->
    <!-- 后代选择器,通过多个选择器的组合,选中某个元素的子/孙元素(后代元素) -->
    <style>
        /* 后代选择器选择ul中的所有后代都设置样式,ul和li中间一定要有空格 */
        /* ul li{
            color: blue;
        } */
         /* 中间也要有空格,没有空格的话就是在找ul同时class为san的元素 */
        /* ul .san{
            color: red;
        } 
        ul a{
            color: aqua;
        } */
        /* 子选择器 选中某个元素的子元素起效果,子选择器中间会有个>  和后代选择器的区别就是后代还可以选孙子,但子选择器不行,假如ul中的li中还有一个a标签,后代可以选择到但是子选择器通过ul就选不到 */
        /* ul>.san{
            color: red;
        }
        ul>a{
            color: black;
        } */
        
    </style>
    <!-- <ul>
        <li class="san">张三</li>
        <li>
            <a href="#">李四</a>
        </li>
        <li>王五</li>
    </ul>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol> -->

    <!-- 并集选择器 并列多个选择器,可以是后代选择器,也可以是子选择器 -->
    <style>
        /* 对于选择里面的有些元素有可能选择到时不受影响的,例如这里并集选择的话有可能a标签就不会收到影响,这里还是比较乱的,就不详细了解了
        任何的基础选择器都可以使用并集选择器来表示,并集选择器减一竖着写,每个选择占一行 */
        /* ul .san, 
        ol>li{
            color: red;
        } */
    </style>
    <!-- <ul>
        <li class="san">张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol> -->

    <!-- 伪类选择器 -->
    <style>
        /* div{
            color: #000;
        } */
        /* 鼠标悬停的时候,应用这个样式 可以是一个动态的样式 也可以设置一个过渡的过程,但是这里就不实现了 */
        /* div:hover{
            color: blue;
        } */
        /* 鼠标按下的时候,应用这个样式 */
        /* div:active{
            color: red;
        } */
    </style>
    <!-- <div>一个div</div> -->



    <!-- CSS不区分大小写,因此一般不存在驼峰命名法,一般会使用脊柱命名法,用-来分割单词 -->
    <!-- 1.内部样式 style可以放在任何位置 -->
    <style>
        /* css描述的是页面的样式就是描述了一个网页的元素(大小/位置/字体/颜色/背景/边框),引入CSS就是为了让页面变得更加好看,整体就是会使用出css就可以了 */
        /* 每一个CSS语句包含两个部分:选择器+ 应用的属性 css代码一般放在style里面可以放在任何位置 */
        /* p{
            color: blue;    */
            /* p就是选择器,这里就表示选择页面中的所有p标签,{}里面是键值对,就来表示css里面的各种属性,习惯每个键值对独占一行用;来分割一行,每个键值对之间用:分割 */
         /* } */
    </style>
    <!-- <p>hello</p> -->

    <!-- <p style="color: red;">
        hello world -->
        <!--2.内联样式,只针对当前标签起作用 -->
    <!-- </p> -->


    <!-- <p>hi</p> -->

    <!-- 3.外部样式  这是实际开发过程中最常使用的,把css代码单独提取出去,
        放到一个.css文件然后在html中通过link标签来引入css文件,这样可以让多个html复用同一个样式
    link标签一般放在html的head标签里面,而且这个标签可以有多份,通过多个link来引入不同的css样式,虽然工作中最常使用外部样式,但是在这先使用内部样式(简单)-->
    <!-- <p> hi</p> -->

</body>
</html>